<template>
    <v-chart :option="option" autoresize></v-chart>
</template>

<script>
export default {
    name: "z-member-chart",
    props: {
        type: {
            type: Number,
            default: 0
        }
    },
    watch: {
        type() {
            if (this.type == 0) {
                this.option.xAxis.data = [
                    "01-01",
                    "01-02",
                    "01-03",
                    "01-04",
                    "01-05",
                    "01-06",
                    "01-07"
                ];
                this.option.series[0].data = [120, 200, 150, 80, 70, 110, 130];
            } else if (this.type == 1) {
                this.option.xAxis.data = [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6",
                    "7",
                    "8",
                    "9",
                    "10",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                    "25",
                    "26",
                    "27",
                    "28",
                    "29",
                    "30",
                    "31"
                ];
                this.option.series[0].data = [
                    300,
                    323,
                    543,
                    400,
                    654,
                    500,
                    234,
                    300,
                    323,
                    543,
                    400,
                    654,
                    500,
                    234,
                    300,
                    323,
                    543,
                    400,
                    654,
                    500,
                    234,
                    300,
                    323,
                    543,
                    400,
                    654,
                    500,
                    234,
                    363,
                    293,
                    362
                ];
            } else if (this.type == 2) {
                this.option.xAxis.data = [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6",
                    "7",
                    "8",
                    "9",
                    "10",
                    "11",
                    "12"
                ];
                this.option.series[0].data = [
                    500,
                    388,
                    432,
                    532,
                    654,
                    754,
                    456,
                    500,
                    388,
                    432,
                    532,
                    654
                ];
            }
        }
    },
    data() {
        return {
            option: {
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(20, 31, 59, 0.7)",
                    textStyle: {
                        color: "#fff"
                    }
                },
                xAxis: {
                    type: "category",
                    data: [
                        "12-31",
                        "01-01",
                        "01-02",
                        "01-03",
                        "01-04",
                        "01-05",
                        "01-06"
                    ],
                    axisLabel: {
                        textStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff"
                        }
                    }
                },
                grid: {
                    top: "40px",
                    left: "50px",
                    right: "25px",
                    bottom: "40px"
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: "bar",
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(2, 13, 50, 0.3)",
                            borderRadius: 10
                        },
                        barWidth: 13,
                        itemStyle: {
                            borderRadius: 10,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#1251D2"
                                    },
                                    {
                                        offset: 1,
                                        color: "#1BDFFC"
                                    }
                                ]
                            }
                        }
                    }
                ]
            }
        };
    }
};
</script>